<template>
  <div class="wrapper">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div style="padding-bottom: 20px">
        <el-form :model="params" ref="formRef" label-width="60px" inline size="medium">
          <el-form-item label="建筑：">
            <el-input
              v-model="params.buildingLocation"
              placeholder="请输入建筑位置"
              clearable
              @clear="clear"
            ></el-input>
          </el-form-item>

          <el-form-item label="楼层：">
            <el-input
              v-model="params.floor"
              placeholder="请输入楼层"
              clearable
              @clear="clear"
            ></el-input>
          </el-form-item>

          <el-form-item label="区域：">
            <el-input
              v-model="params.area"
              placeholder="请输入区域"
              clearable
              @clear="clear"
            ></el-input>
          </el-form-item>

          <el-form-item label="编号：">
            <el-input
              v-model="params.spaceNumber"
              placeholder="请输入车位编号"
              clearable
              @clear="clear"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="success" @click="search" icon="el-icon-search" size="medium">
              查 询
            </el-button>
            <el-button type="primary" @click="handleAdd" icon="el-icon-plus" size="medium">
              添加车位
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table stripe :data="tableData" border>
        <el-table-column label="建筑" prop="buildingLocation"></el-table-column>
        <el-table-column label="楼层" prop="floor"></el-table-column>
        <el-table-column label="区域" prop="area"></el-table-column>
        <el-table-column label="编号" prop="spaceNumber"></el-table-column>
        <el-table-column label="包月" prop="isMonthly" align="center">
          <template slot-scope="scope">
            <el-tag
              effect="dark"
              size="mini"
              :type="scope.row.isMonthly === 0 ? 'warning' : 'success'"
            >
              {{ scope.row.isMonthly === 0 ? '非包月' : '包月' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="租金价格" prop="price" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.price.toFixed(2) }} 元</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleRemove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: center; margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, prev, pager, next, sizes"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 新增/修改弹窗 -->
    <CarPlaceDialog :show.sync="showDialog" :editRow="editRow" @close="dialogClose" />
  </div>
</template>

<script>
import { getParkingSpaceApi, deleteParkingSpaceApi } from '@/api/parkingSpace'
import CarPlaceDialog from './components/carPlaceDialog'
export default {
  components: { CarPlaceDialog },
  data() {
    return {
      params: {
        spaceNumber: '',
        buildingLocation: '',
        floor: '',
        area: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      showDialog: false,
      editRow: {}
    }
  },
  mounted() {
    this.getParkingSpaceList()
  },
  methods: {
    dialogClose({ update }) {
      this.editRow = {}
      update && this.getParkingSpaceList()
    },
    async getParkingSpaceList() {
      let res = await getParkingSpaceApi(this.params)
      if (res.success) {
        this.tableData = res.data.list
        this.total = res.data.total
      }
    },
    handleEdit(row) {
      this.editRow = row
      this.showDialog = true
    },
    handleRemove(row) {
      this.$confirm('<span style="color: red;">此操作不可逆！确定删除？</span>', '操作提示', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await deleteParkingSpaceApi({ id: row.id })
          if (res.success) {
            this.$message.success('删除成功！')
            this.getParkingSpaceList()
            return
          }
          this.$message.error('删除失败！')
        })
        .catch(() => {})
    },
    handleAdd() {
      this.showDialog = true
    },
    search() {
      if (
        !this.params.spaceNumber.trim() &&
        !this.params.buildingLocation.trim() &&
        !this.params.floor.trim() &&
        !this.params.area.trim()
      ) {
        this.$message.warning('请先输入要查询的条件')
        return
      }
      this.getParkingSpaceList()
    },
    clear() {
      this.getParkingSpaceList()
    },
    handleSizeChange(val) {
      this.params.pageNum = 1
      this.params.pageSize = val
      this.getParkingSpaceList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getParkingSpaceList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 15px;
}
</style>
